import React, {PureComponent} from "react"
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Cascader} from "antd";
import ToolTipsInput from "libs/tooltips-input"
import {formItemLayout} from "./layout"
import area, {areaFilter} from "libs/area"
import AppModal from "libs/app-modal"

const form = Form.create()


export default @form
class ReceiverForm extends PureComponent {

  onOk = () => {
    const onSubmit = this.props.onOk
    if (onSubmit) onSubmit(this.props.form)
  }


  render() {
    const initData = this.props.initData || {receiverName: ''}
    const {visible, onCancel, title} = this.props
    const {getFieldDecorator} = this.props.form

    return (
      <AppModal title={title}
                visible={visible}
                width={600}
                title={title}
                onOk={this.onOk}
                onCancel={onCancel}>
        <div className={'receiver-form-box'}>
          <Form>
            <Form.Item label={'收件人姓名'} {...formItemLayout}>
              {getFieldDecorator('receiverName', {
                initialValue: initData.receiverName,
                rules: [
                  {required: true, message: '请输入收件人姓名'},
                  {pattern: /^.{1,20}$/, message: '收件人姓名由20位字符组成'},],
              })(
                <ToolTipsInput title={'1-20位字符,推荐使用汉字'}
                               placeholder="请输入收件人姓名"/>
              )}
            </Form.Item>


            <Form.Item label={'联系电话'} {...formItemLayout}>
              {getFieldDecorator('receiverPhone', {
                initialValue: initData['receiverPhone'],
                rules: [{required: true, message: '请输入联系电话'},
                  {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$|^\d{3,5}\-?\d{7,8}$/,
                    message: '电话号码格式不正确'
                  }
                ],
              })(
                <ToolTipsInput title={'联系电话,国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                               placeholder='请输入手机号码名固定电话号码'/>
              )}
            </Form.Item>


            <Form.Item label={'所在地区'} {...formItemLayout}>
              {getFieldDecorator('area', {
                initialValue: initData['area'],
                rules: [{required: true, message: '请选择地址所在省、市、区、县'}],
              })(
                <Cascader options={area}
                          showSearch={areaFilter}
                          placeholder='请输入并选择地址所在省、市、区、县'/>
              )}
            </Form.Item>

            <Form.Item label={'详细地址'} {...formItemLayout}>
              {getFieldDecorator('address', {
                initialValue: initData.address,
                rules: [
                  {required: true, message: '请输入详细地址'},
                  {pattern: /^.{2,50}$/, message: '详细地址需要2-50个字符'},],
              })(
                <ToolTipsInput title={'详细的收件街道、门牌号'}
                               placeholder="详细的收件街道、门牌号"/>
              )}
            </Form.Item>
          </Form>
        </div>
      </AppModal>
    );
  }
}